<template>
    <div class="home-container">
        <!-- 幻灯片轮播 -->
        <div class="home-section">
            <el-carousel height="400px" :interval="5000" arrow="always">
                <el-carousel-item v-for="(slide, index) in slides" :key="index">
                    <el-image :src="slide.image" fit="cover" class="slide-image">
                        <template #error>
                            <div class="image-error">
                                <el-icon>
                                    <Picture />
                                </el-icon>
                                <span>图片加载失败</span>
                            </div>
                        </template>
                    </el-image>
                    <div class="slide-content">
                        <h3 class="slide-title">{{ slide.title }}</h3>
                        <p class="slide-desc">{{ slide.description }}</p>
                        <el-button v-if="slide.buttonText" type="primary" size="large" @click="handleSlideClick(slide)">
                            {{ slide.buttonText }}
                        </el-button>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 任务广场 -->
        <TaskSquare :tasks="taskList" @taskClick="handleTaskClick" @acceptTask="handleAcceptTask"
            @moreClick="handleMoreClick" />
        <GoodsSquare />
        <ActivitySquare />
        <NewsSquare />
        <ServiceNavigation />
    </div>

</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import {
    Picture, List, ArrowRight, Goods, Coin, User,
    Location, Clock, School, ChatDotRound, Star
} from '@element-plus/icons-vue'
import { onMounted } from 'vue'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import TaskSquare from './components/TaskSquare.vue'
import GoodsSquare from './components/GoodsSquare.vue'
import ActivitySquare from './components/ActivitySquare.vue'
import NewsSquare from './components/NewsSquare.vue'
import ServiceNavigation from './components/ServiceNavigation.vue'
const router = useRouter()
const activeTab = ref('news')
import type { ITask } from '@/types/task'


// 幻灯片数据
const slides = ref([
    {
        image: "https://p3.hippopx.com/preview/736/427/landscape-rocks-%C4%A2ory-array-look-the-foot-of-the-alps-rock-perspective-overlap-mountain.jpg",
        title: '校园科技文化节即将开幕',
        description: '第十五届校园科技文化节将于下月举行，欢迎全校师生积极参与',
        buttonText: '查看详情',
        link: '/activity/tech-festival'
    },
    {
        image: 'https://p1.hippopx.com/preview/56/294/518/sculpture-christ-figure-jesus-christ.jpg',
        title: '2023年度校园运动会报名开始',
        description: '一年一度的校园运动会将于11月25日举行，各项目报名通道已开启',
        buttonText: '立即报名',
        link: '/activity/sports-meet'
    },
    {
        image: 'https://p3.hippopx.com/preview/430/883/snowkiting-winter-sports-snowy-terrain-sunset-dynamic-snowkiter-gliding-thrill-outdoor-activity-snow-covered-landscape-adventure.jpg',
        title: '图书馆新书推荐',
        description: '本月新增5000余册图书，涵盖文学、科技、经济等多个领域',
        buttonText: '查看书单',
        link: '/library/new-books'
    },
    {
        image: 'https://p3.hippopx.com/preview/245/792/porto-portugal-historic-architecture-riverside-charm-waterfront-buildings-picturesque-view-douro-river-colorful-houses-european-cityscape-old-town-city-skyline.jpg',
        title: '校园食堂满意度调查',
        description: '参与调查即可获得食堂10元代金券，期待您的宝贵意见',
        buttonText: '参与调查',
        link: '/survey/canteen'
    }
])

// 任务列表数据
const taskList = ref<ITask[]>([
    {
        id: 1,
        title: '快递代取服务',
        content: '帮忙从校园快递站取3个包裹送到宿舍区3号楼，包裹大小中等',
        status: "待领取",
        type: "代取快递",
        reward: 15,
        rewardType: "积分",
        remainCount: 2,
        startTime: "2023-06-01 08:00:00",
        endTime: "2023-06-30 20:00:00",
        createdBy: "user_123",
        createTime: "2023-05-30 14:30:00",
    },
    {
        id: 2,
        title: '校园美食测评员',
        content: '参与新开食堂窗口的菜品测评，需要撰写简短评价报告',
        status: "进行中",
        type: "校园服务",
        reward: 80,
        rewardType: "现金",
        rewardUnit: "元",
        remainCount: 5,
        startTime: "2023-06-05 11:00:00",
        endTime: "2023-06-15 18:00:00",
        createdBy: "canteen_admin",
        createTime: "2023-06-01 09:15:00",
    },
    {
        id: 3,
        title: '学术讲座志愿者',
        content: '协助布置会场、引导观众，参与全程可获得志愿者证书',
        status: "待领取",
        type: "志愿活动",
        reward: 1,
        rewardType: "证书",
        rewardUnit: "份",
        remainCount: 8,
        startTime: "2023-06-10 13:00:00",
        endTime: "2023-06-10 17:00:00",
        createdBy: "academic_office",
        createTime: "2023-05-28 10:00:00",
    },
    {
        id: 4,
        title: '二手教材收购',
        content: '求购《高等数学(第七版)》上下册，要求九成新无笔记',
        status: "进行中",
        type: "二手交易",
        reward: 60,
        rewardType: "现金",
        rewardUnit: "元/套",
        remainCount: 1,
        startTime: "2023-05-20 00:00:00",
        endTime: "2023-06-25 00:00:00",
        createdBy: "student_456",
        createTime: "2023-05-19 18:30:00",
    },
    {
        id: 5,
        title: '周末拼车回家',
        content: '6月17日周六上午9点从学校到火车站，现有3个空位',
        status: "待领取",
        type: "拼车服务",
        reward: 20,
        rewardType: "现金",
        rewardUnit: "元/人",
        remainCount: 3,
        startTime: "2023-06-17 09:00:00",
        endTime: "2023-06-17 12:00:00",
        createdBy: "driver_789",
        createTime: "2023-06-10 15:20:00",
    },
    {
        id: 6,
        title: '英语学习伙伴',
        content: '寻找每周三次英语口语练习伙伴，互相纠正发音',
        status: "进行中",
        type: "学习互助",
        reward: 0,
        rewardType: "其他",
        rewardUnit: "互助学习",
        remainCount: 4,
        startTime: "2023-06-01 00:00:00",
        endTime: "2023-07-31 00:00:00",
        createdBy: "english_lover",
        createTime: "2023-05-25 20:45:00",
    }
])

//校园资讯数据
const newsList = ref([
    {
        id: 1,
        title: '2023年度校园科技文化节即将开幕',
        content: '第十五届校园科技文化节将于下月举行，欢迎全校师生积极参与',
        author: 'admin',
        createTime: '2023-05-20 10:00:00',
        image: 'https://agoni-web.oss-cn-beijing.aliyuncs.com/70b8c951-bcac-4cd1-a1d6-3cf1ff840f74.jpg'
    },
    {
        id: 2,
        title: '2023年度校园运动会报名开始',
        content: '一年一度的校园运动会将于11月25日举行，各项目报名通道已开启',
        author: 'admin',
        createTime: '2023-05-15 12:00:00',
    }])




// 操作方法
const handleSlideClick = (slide: any) => {
    if (slide.link) {
        router.push(slide.link)
    }
}

const handleTaskClick = (task: any) => {
    // 跳转到任务详情页
    router.push(`/task/detail/${task.id}`)
}

const handleAcceptTask = (task: any) => {
    // 处理接受任务逻辑
    if (task.remainCount && task.remainCount > 0) {
        task.remainCount -= 1
        if (task.remainCount === 0) {
            task.status = "进行中"
        }
        ElMessage.success(`已成功参与任务：${task.title}`)
    } else {
        ElMessage.warning('该任务已没有剩余名额')
    }
}
const handleMoreClick = () => {
    router.push('/tasks')
}


const getStatusType = (status: string) => {
    switch (status) {
        case '待领取': return 'warning'
        case '进行中': return 'success'
        case '已完成': return 'info'
        default: return ''
    }
}

const formatTime = (timeStr: string) => {
    return dayjs(timeStr).format('MM-DD HH:mm')
}

onMounted(() => {
})
</script>

<style scoped>
.home-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.home-section {
    margin-bottom: 40px;
}

.slide-image {
    width: 100%;
    height: 100%;
}

.image-error {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f5f5f5;
    color: #999;
}

.image-error .el-icon {
    font-size: 50px;
    margin-bottom: 10px;
}

.slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: white;
}

.slide-title {
    margin: 0 0 10px;
    font-size: 24px;
    color: white;
}

.slide-desc {
    margin: 0 0 15px;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.section-title {
    margin: 0;
    font-size: 20px;
    color: #333;
    display: flex;
    align-items: center;
}

.section-title .el-icon {
    margin-right: 8px;
    font-size: 24px;
}

.section-more {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #666;
    text-decoration: none;
    transition: all 0.3s;
}

.section-more:hover {
    color: #409eff;
}

.section-more .el-icon {
    margin-left: 5px;
}

/* 任务广场样式 */
.task-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.task-card {
    cursor: pointer;
    transition: transform 0.3s;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.task-card:hover {
    transform: translateY(-5px);
}

.task-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.task-type {
    font-size: 12px;
    color: #666;
}

.task-title {
    margin: 0 0 10px;
    font-size: 18px;
    color: #333;
}

.task-content {
    margin: 0 0 15px;
    font-size: 14px;
    color: #666;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.task-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.task-meta {
    font-size: 12px;
    color: #999;
}

.task-meta .el-icon {
    margin-right: 3px;
    font-size: 12px;
}

.task-time,
.task-count {
    display: flex;
    align-items: center;
    margin-right: 8px;
}
</style>